/**
*@Description:Picker，选择组件 https://youzan.github.io/vant/#/zh-CN/picker
*@Author:nnf
*@Date:2020/09/15 16:48:51
*@todo:
*@param:{Boolean}--showPicker--是否展示判断标志 required
*@param:{String}--selectedText--选中内容 required
*@param:{Array}--dataSource--列表数据源 required
*@param:{Number}--column--列表可视化展示item数量
*@useage: <base-picker v-model="areaText" :showPicker.sync="showArea" :dataSource="areaList">
          </base-picker>
*/
<template>
  <div>
    <van-popup v-model="tempShowPicker" position="bottom" @click-overlay="close">
      <van-picker
        title="请选择"
        show-toolbar
        confirm-button-text="确定"
        :visible-item-count="column"
        :columns="dataSource"
        @cancel="close"
        @confirm="confirm"
      />
    </van-popup>
  </div>
</template>

<script>
import { Picker, Popup } from 'vant';

export default {
  name: 'BasePicker',
  components: {
    [Picker.name]: Picker,
    [Popup.name]: Popup,
  },
  props: {
    dataSource: { // 数据源
      type: Array,
    },
    showPicker: { // 选区展示标志
      type: Boolean,
      required: true,
    },
    selectedText: { // 选中内容
      type: String,
    },
    column: { // 可视化项目数量
      type: Number,
      required: false,
      default: 5,
    },
  },
  data() {
    return {
      tempShowPicker: false,
    };
  },
  watch: {
    showPicker(val) {
      this.tempShowPicker = val;
    },
  },
  methods: {
    close() {
      this.$emit('update:showPicker', false);
    },
    confirm(value) {
      this.$emit('update:showPicker', false);
      this.$emit('input', value.text, value.value);
    },
  },
};
</script>

<style lang="less" scoped>
  /deep/.van-picker__cancel {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 20px;
  }
  /deep/.van-picker__title{
    height: 20px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #2B2B2B;
    line-height: 20px;
  }
  /deep/.van-picker__confirm {
    height: 20px;
    font-size: 14px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #009B63;
    line-height: 20px;
  }
  /deep/.van-picker-column {
    font-size: 17px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #2B2B2B;
  }
  /deep/.van-picker-column__item {
    font-size: 20px;
  }
  /deep/.van-picker__toolbar {
    height: 40px;
    background: #F5F5F5;
  }
</style>
